<template>
    <div class="app-container">
        <!--患者数据-->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px"
            class="formBox1 formBox searchForm">
            <el-form-item label="医院" prop="hospital" clearable>
                <department :isHospital="true" :isdepat="true" @refreshData="refreshData" deptWidth="160px"
                    :isUserAll="true" ref="department">
                </department>
            </el-form-item>
            <el-form-item label="顾客ID" prop="patientId">
                <el-input v-model="queryParams.patientId" placeholder="顾客ID" clearable style="width: 160px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="顾客编号" prop="visitNum">
                <el-input v-model="queryParams.visitNum" placeholder="请输入顾客编号" clearable style="width: 160px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="姓名" prop="patientName">
                <el-input v-model="queryParams.patientName" placeholder="请输入姓名" clearable style="width: 160px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="申请类型" prop="type">
                <el-select v-model="queryParams.type" filterable placeholder="请选择状态" clearable style="width: 160px">
                    <el-option v-for="dict in actionTypeArr" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审核状态" prop="state">
                <el-select v-model="queryParams.state" filterable placeholder="请选择状态" clearable style="width: 160px"
                    @change="handleQuery">
                    <el-option v-for="dict in checkedArr" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker v-model="dateRange" style="width:240px" value-format="yyyy-MM-dd" type="daterange"
                    :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                    @change="handleQuery"></el-date-picker>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="formBox searchForm" style="margin-bottom:0px!important;" ref="statisticalTable">
            <el-row :gutter="10" class="mb8">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getRecoeryList"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" style="width: 100%" :data="photoList" ref="table" class="elTable" :height="statisticalTableH">
                <el-table-column label="序号" align="center" type="index" width="50">
                    <template slot-scope="scope">
                        <span>{{ getIndex(scope.$index) }}</span>
                    </template>
                </el-table-column>
                <el-table-column sortable label="顾客ID(修改前)" align="center" prop="patientId" width="115" />
                <el-table-column sortable label="顾客编号" align="center" prop="visitNum" width="140" />
                <el-table-column sortable label="顾客姓名(修改前)" align="center" prop="patientName" width="130" />
                <el-table-column sortable label="申请类型" align="center" prop="type" width="90">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.type == 1" size="mini">信息修改</el-tag>

                        <el-tag type="warning" v-if="scope.row.type == 2" size="mini">删除</el-tag>
                        <el-tag type="danger" v-if="scope.row.type == 3" size="mini">状态回滚</el-tag>
                        <el-tag type="warning" v-if="scope.row.type == 4" size="mini">门诊修改</el-tag>
                    </template>
                </el-table-column>

                <el-table-column sortable label="审核状态" align="center" prop="state" width="85">
                    <template slot-scope="scope">
                        <el-tag type="warning" effect="dark" v-if="scope.row.state == 1" size="mini">待审核</el-tag>
                        <el-tag type="success" effect="dark" v-if="scope.row.state == 2" size="mini">已审核</el-tag>

                    </template>
                </el-table-column>
                <el-table-column sortable label="变更数据信息" align="center" prop="doctorDiagnosisValue" width="400">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 1" style="text-align:left;color:#000;font-size:14px;">
                            <div v-if="scope.row.patientId != scope.row.postMirrorPatientId">
                                顾客ID: <span style="margin:0 4px;color:#999">{{ scope.row.patientId }}</span> <span
                                    style="font-weight:700;color:#000;">=></span><span style="color:red;margin:0 4px;">{{
                                        scope.row.postMirrorPatientId }}</span>
                            </div>

                            <div v-if="scope.row.patientName != scope.row.postMirrorPatientName">
                                姓名: <span style="margin:0 4px;color:#999">{{ scope.row.patientName }}</span> <span
                                    style="font-weight:700;color:#000;">=></span><span style="color:red;margin:0 4px;">{{
                                        scope.row.postMirrorPatientName }}</span>
                            </div>
                            <div v-if="scope.row.idNum != scope.row.postMirrorIdNum">
                                身份证: <span style="margin:0 4px;color:#999">{{ scope.row.idNum }}</span> <span
                                    style="font-weight:700;color:#000;">=></span> <span style="color:red;margin:0 4px;">{{
                                        scope.row.postMirrorIdNum }}</span>
                            </div>
                            <div v-if="scope.row.patientPhone != scope.row.postMirrorPatientPhone">
                                手机号: <span style="margin:0 4px;color:#999">{{ scope.row.patientPhone }}</span> <span
                                    style="font-weight:700;color:#000;">=></span> <span style="color:red;margin:0 4px;">{{
                                        scope.row.postMirrorPatientPhone }}</span>
                            </div>
                            <div v-if="scope.row.birthDate != scope.row.postMirrorBirthDate">
                                出生日期: <span style="margin:0 4px;color:#999">{{ scope.row.birthDate }}</span> <span
                                    style="font-weight:700;color:#000;">=></span><span style="color:red;margin:0 4px;">{{
                                        scope.row.postMirrorBirthDate }}</span>
                            </div>
                        </div>
                        <div v-if="scope.row.type == 2" style="text-align:left;color:#000;">
                            顾客编号为：{{ scope.row.visitNum }}的记录 <span style="color:red;margin:0 4px;">删除</span>
                        </div>
                        <div v-if="scope.row.type == 3" style="text-align:left;color:#000;">
                            <div v-if="scope.row.status != scope.row.postMirrorStatus">
                                状态: <span style="margin:0 4px;color:#999">{{ scope.row.status == 4 ? '治疗结束' :
                                    scope.row.status == 3 ? '治疗中' : scope.row.status == 2 ? '已咨询待诊断' : '待咨询' }}</span>
                                <span style="font-weight:700;color:#000;">=></span><span style="color:red;margin:0 4px;">{{
                                    scope.row.postMirrorStatus == 4 ? '治疗结束' : scope.row.postMirrorStatus == 3 ? '治疗中' :
                                    scope.row.postMirrorStatus == 2 ? '已咨询待诊断' : '待咨询' }}</span>
                            </div>
                        </div>

                        <!-- 门诊修改 getDept-->
                        <div v-if="scope.row.type == 4" style="text-align:left;color:#000;">
                            <div>
                               就诊门诊: <span style="margin:0 4px;color:#999">{{ getDept(scope.row.deptId) }}</span>
                                <span style="font-weight:700;color:#000;">=></span><span style="color:red;margin:0 4px;">{{ getDept(scope.row.postMirrorDeptId) }}</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column sortable label="申请人" align="center" prop="createBy" width="100" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column sortable label="创建日期" align="center" prop="creatTime" width="160">
                    <template slot-scope="scope">
                        <span>{{ scope.row.creatTime }}</span>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-document" v-if="scope.row.state == 1"
                            @click="handleSure(scope.row)">审核通过</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row)">删除</el-button>
                        <el-button size="mini" type="text" v-if="scope.row.state == 2 && scope.row.type != 2"
                            @click="goDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :pageSizes.sync="pageSizes"
                :limit.sync="queryParams.pageSize" @pagination="getRecoeryList" />


        </div>

        <!-- 详情 -->
        <el-dialog :title="detailTitle" :class="device !== 'mobile' ? '' : 'active'" :visible.sync="detailDialogVisible" width="85%" center :close-on-click-modal="false" class="nopaddingDailog"
            v-dialogDrag @closed="getRecoeryList">
            <CustomerDetails v-if="detailDialogVisible" :basicInfo="basicInfo"></CustomerDetails>
        </el-dialog>
    </div>
</template>
  
<script>
import { mapGetters } from "vuex";
import { getRecoeryPatientInfo, getRecoeryList, updateRecoveryData, delRecoveryData } from "@/api/dataRecovery/dataRecovery";
import department from "@/views/components/department/index.vue";
import CustomerDetails from "@/views/components/customerDetail/customerDetail";
import { listAllDept } from "@/api/system/dept";
export default {
    name: "dataReview",
    components: { department, CustomerDetails },
    dicts: [

    ],
    data() {
        return {
            pageSizes: [15,20, 30, 50],
            statisticalTableH:undefined,
            detailTitle: "",
            detailDialogVisible: false,
            basicInfo: {},
            //审核状态
            checkedArr: [
                { value: 1, label: "待审核" },
                { value: 2, label: "已审核" },
            ],
            //操作类型
            actionTypeArr: [
                { value: 1, label: "信息修改" },
                { value: 2, label: "删除" },
                { value: 3, label: "状态回滚" },
                { value: 4, label: "门诊修改" },
            ],
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            listTotal: 0,
            // 照片表格数据
            photoList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 日期范围
            dateRange: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '前天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近1年',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 15,
                deptId: undefined,
                patientId: undefined,
                patientName: undefined,
                state: undefined,
                type: undefined,
                visitNum: undefined,
                patientPhone: undefined,
                hospitalId: undefined,
            },
            deptArray:[]

        }
    },
    watch: {
        showSearch() {
            console.log("执行----****")
            this.$nextTick(() => {
                this.changeHeight()
            }, 1000)

        }

    },
    mounted() {
        console.log(this.statisticalTableH )
        if (this.$refs.statisticalTable) {
            const statisticalTableObj = this.$refs.statisticalTable.getBoundingClientRect();
            let h = statisticalTableObj.top + 100
            this.statisticalTableH = 'calc(100vh - ' + h + 'px)'

        } else {
            this.statisticalTableH = '500px'
        }
    },
    computed: {
    ...mapGetters(["dept", "hospital", "device"]),
  },
    updated() {
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
    },
    methods: {
        changeHeight() {
            if (this.$refs.statisticalTable) {
                const statisticalTableObj = this.$refs.statisticalTable.getBoundingClientRect();
                let h = statisticalTableObj.top + 118
                this.statisticalTableH = 'calc(100vh - ' + h + 'px)'
            } else {
                this.statisticalTableH = '500px'
            }
        },
        getlistAllDept() {
            let that = this
            listAllDept().then(response => {
                let data = response.data
                that.deptArray=data
               that.getRecoeryList()
            });
        },
        getDept(id){
            console.log('门诊喜喜')
            console.log(id)
            console.log(this.deptArray)
            let deptName=''
           this.deptArray.forEach(function (ele) {
                    if(ele.deptId==id){
                        deptName=ele.deptName
                    }
                })
                console.log(deptName)
            return deptName
        },
        // 多选框选中数据
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (
                (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
            );
        },
        resetQuery() {
            this.dateRange = [];
            this.queryParams = {
                pageNum: 1,
                pageSize: 15,
                deptId: undefined,
                patientId: undefined,
                patientName: undefined,
                state: undefined,
                type: undefined,
                visitNum: undefined,
                patientPhone: undefined,
                hospitalId: undefined,
            },
                this.resetForm("queryForm");
            this.handleQuery();
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getlistAllDept()
            
        },
        refreshData(data) {
            this.queryParams.pageNum = 1;
            this.queryParams.hospitalId = data.hospitalId
            this.queryParams.deptId = data.deptId
        },
        // 审核通过
        handleSure(row) {
            let params = {
                patientId: row.patientId,
                idNum: row.postMirrorIdNum,
                hospitalId: row.hospitalId
            }
            let that = this
            const text = row.type == 1 ? "信息修改" : row.type == 2 ? "删除" : row.type == 3 ? "状态回滚" : ''
            getRecoeryPatientInfo(params).then(response => {
                if (response.code == 200) {
                    let data = response.data
                    if (data && data.length > 0) {
                        let dataInfo = data[0]
                        this.$modal
                            .confirm(
                                '是否确认同意将 {顾客ID:' + row.patientId + ' | 姓名：' + row.patientName + '} 和 { 顾客ID: ' + data[0].patientId + ' | 姓名：' + data[0].patientName + ' }的数据进行"' + text + '合并"申请'
                            )
                            .then(function () {
                                that.getupdateRecoveryData(row.id)
                            })

                            .catch(() => { });
                    } else {
                        this.$modal
                            .confirm(
                                '是否确认同意 顾客ID:' + row.patientId + '的数据"' + text + '"申请'
                            )
                            .then(function () {
                                console.log("确认")
                                that.getupdateRecoveryData(row.id)
                            })

                            .catch(() => { });

                    }
                }
            })
        },
        getupdateRecoveryData(id) {
            let params = {
                id: id,
                behaviorType: 1  //审核通过
            }
            updateRecoveryData(params).then(response => {
                if (response.code == 200) {
                    let data = response.data
                    this.$modal.msgSuccess("审核通过，数据已修复成功！");
                    this.getRecoeryList();
                }
            })
        },
        goDetail(row) {
            this.detailTitle = "顾客详情";
            let baseInfo = {
                patientId: row.postMirrorPatientId,
                visitNum: row.visitNum,
                deptId:row.type==4?row.postMirrorDeptId:row.deptId,
                patientPhone: row.postMirrorPatientPhone,
                hospitalId: row.hospitalId,
            }
            this.basicInfo = baseInfo;
            this.detailDialogVisible = true;
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const name = row.patientId
            const text = row.type == 1 ? "信息修改" : row.type == 2 ? "删除" : row.type == 3 ? "状态回滚" : ''
            const id = row.id
            this.$modal
                .confirm(
                    '是否确认删除 顾客ID:' + name + '的数据"' + text + '"申请'
                )
                .then(function () {
                    return delRecoveryData(id);
                })
                .then((res) => {
                    this.getRecoeryList();
                    if (res.code == 200) {
                        this.$modal.msgSuccess("删除成功");
                    }
                })
                .catch(() => { });
        },
        getRecoeryList() {
            this.loading = true;
            console.log('this.queryParams', this.queryParams)
            let params = {
                startTime: this.dateRange ? this.dateRange[0] : '',
                endTime: this.dateRange ? this.dateRange[1] : '',
                ...this.queryParams
            }

            getRecoeryList(params).then(response => {
                if (response.code == 200) {
                    this.photoList = response.rows

                    this.total = response.total

                }
                this.loading = false;
            })
        },

    },
    created() {
        this.handleQuery()
    }
}
</script>
  
<style scoped rel="stylesheet/scss" lang="scss">
.tooltipSlotBox {
    max-width: 460px;
    display: flex;
    flex-wrap: wrap;

    .img-txt {
        //display: flex;
        //flex-direction: column;
        //text-align: center;
        //margin: 14px;
        margin: 6px;

        .user-info-head {
            width: 72px;
            height: 104px;

            //border: 1px solid #000;
            .img-style {
                width: 100%;
                height: 100%;

                ::v-deep .el-image__error {
                    opacity: 0;
                }
            }
        }
    }

}
</style>
  